<template>
  <div class="app-container">
    <el-card class="righttable right-lay">
      <div class="search-container">
        <el-input v-model="searchQuery" placeholder="搜索课程" clearable @input="handleSearch" style="width: 300px;"
          prefix-icon="el-icon-search">
        </el-input>
      </div>


      <div class="right-down">
        <el-table :data="filteredCouListData" border stripe style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }">
          <el-table-column label="序号" type="index" align="center" min-width="100"></el-table-column>
          <el-table-column label="课程名称" prop="name" min-width="100" align="center"></el-table-column>
          <el-table-column prop="uname" label="教师" min-width="100" align="center"></el-table-column>
          <el-table-column prop="week" label="周次" min-width="100" align="center"></el-table-column>
          <el-table-column prop="section" label="节数" min-width="100" align="center"></el-table-column>
          <el-table-column prop="application_status" sortable label="操作" align="center" min-width="350">
            <template slot-scope="scope">
              <el-button plain type="success" size="mini"
                @click="handleStatistics(scope.$index, scope.row)">考勤统计</el-button>
              <el-button plain type="primary" size="mini"
                @click="handleHistory(scope.$index, scope.row)">查看历史考勤</el-button>
              <el-button type="primary" size="mini" @click="handleCurrent(scope.$index, scope.row)">查看正在签到</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-box">
          <el-pagination background @current-change="handleCouCurrentChange" layout="total, prev, pager, next, jumper"
            :current-page.sync="formInlineCou.pageNum" :page-size="formInlineCou.pageSize" :total="couTotal">
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    fatherName: String, // 接收父组件传递的标题
    soid: String,
    sid: String,
  },
  data() {
    return {
      searchQuery: '', // 搜索框的内容
      couListData: [], // 课程绑定列表
      formInlineCou: {
        pageNum: 1,
        pageSize: 5,
      },
      couTotal: 0,
    };
  },
  watch: {
    fatherName(newName) {
      this.getCouList(newName);
    },
  },
  created() {
    // this.getCouList(this.fatherName);   初始化时加载课程
  },
  computed: {
    // 计算属性，根据搜索查询过滤课程数据
    filteredCouListData() {
      return this.couListData.filter(course => {
        return course.name.toLowerCase().includes(this.searchQuery.toLowerCase());
      });
    }
  },
  methods: {
    // async getCouList() {
    //   const { data: res } = await this.$http.get('/cou/applybindcou', {
    //     params: {
    //       oid: this.soid,
    //     }
    //   });
    //   if (res.code == 200) {
    //     this.couListData = res.data.map(e => {
    //       return {
    //         ...e,
    //         groupType: 1
    //       };
    //     });
    //     this.couTotal = res.total;
    //   }
    // },


    //查看组织
    async getCouList() {
      // console.log('Current soid:', this.soid);
      // console.log('Current fatherName:', this.fatherName); 
      // console.log('Current poid:', this.poid); 
      if (!this.sid) {
        this.flag = 1
      } else {
        const { data: res } = await this.$http.get('/org/whethersee', {
          params: {
            oid: this.soid, //要查看的下级组织
            sid: this.sid //本组织
          }
        })
        if (res.code === 200) {
          this.flag = 1
        }
        if (res.code === 113) {
          this.flag = 2
        }
      }
      if (this.flag === 1 || this.soid === this.sid) {
        const { data: res } = await this.$http.get('/cou/applybindcou', {
          params: {
            oid: this.soid,
          }
        });
        if (res.code == 200) {
          this.couListData = res.data.map(e => {
            return {
              ...e,
              groupType: 1
            };
          });
          this.couTotal = res.total;
        }
      } else {
        this.couListData = []; // 清空课程数据列表
        this.couTotal = 0;
        this.$message.error('下级关闭查看考勤情况')
      }
    },

    // 模拟数据获取
    // async getCouList(title) {
    //   let mockData = []; // 模拟数据，根据不同的 title 显示不同的课程列表
    //   if (title === 'test1') {
    //     mockData = [
    //       {
    //         name: '组织课程1',
    //         uname: '老师1',
    //         week: '周一',
    //         section: '1-2节',
    //         application_status: '已通过',
    //       },
    //       {
    //         name: '组织课程2',
    //         uname: '老师2',
    //         week: '周二',
    //         section: '3-4节',
    //         application_status: '已通过',
    //       },
    //       {
    //         name: '组织课程3',
    //         uname: '老师3',
    //         week: '周三',
    //         section: '5-6节',
    //         application_status: '已通过',
    //       },
    //     ];
    //   } else if (title === 'test2') {
    //     mockData = [
    //       {
    //         name: '组织课程A',
    //         uname: '老师A',
    //         week: '周四',
    //         section: '7-8节',
    //         application_status: '已通过',
    //       },
    //       {
    //         name: '组织课程B',
    //         uname: '老师B',
    //         week: '周五',
    //         section: '9-10节',
    //         application_status: '已通过',
    //       },
    //     ];
    //   }
    //   this.filterCourses(mockData);
    // },

    handleStatistics(index, row) {
      this.$router.push({
        path: '/zuzhi/courseAttendance/courseAttendance1',
        query: {
          ccid: row.ccid,
          oid: this.soid,
          fatherName: this.fatherName,
          childName: row.name,
        },
      });
    },

    handleCurrent(index, row) {
      this.$router.push({
        path: '/zuzhi/nowSign',
        query: {
          oid: this.soid,
          fatherName: this.fatherName,
          ccid: row.ccid,
        },
      });
    },
    //查看历史考勤
    handleHistory(index, row) {
      // window.sessionStorage.setItem('ccid', row.ccid)
      // window.sessionStorage.setItem('curriculumName', row.curriculumName)
      this.$router.push({
        path: '/zuzhi/courseHistory/courseHistory1',
        query: {
          oid: this.soid,
          fatherName: this.fatherName,
          ccid: row.ccid,
          curriculumName: row.name
        }
      })
    },

    handleCouSizeChange(val) {
      this.formInlineCou.pageNum = 1;
      this.getCouList();
    },

    handleCouCurrentChange(val) {
      this.formInlineCou.pageNum = val;
      this.getCouList();
    },
  },
};
</script>

<style lang="scss" scoped>
.search-container {
  margin-top: 20px;
  margin-bottom: 10px;
  /* 控制与表格之间的距离 */
}

.pagination-box {
  margin-top: 20px;
}
</style>
